<template>
  <div style="height: 100%;">
    <div style="text-align: right; margin-bottom: 10px;">
    <div class="title" style="display: inline-block;font-size: 20px;">{{ bizOrgName }}配电室{{ value }}月用电量统计（kWh）</div>
    <div style="display: inline-block;width:35%;" class="tabbar">
      <el-button type="primary" size="small"   @click="daochu"><i class="el-icon-upload2">导出</i></el-button>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <span style=" cursor: pointer;margin: 0 10px;" @click="shuaxin"><i class="el-icon-refresh-right"></i></span>
      </el-tooltip>
      <el-dropdown trigger="click" @command="command">
      <span class="el-dropdown-link">
        <el-tooltip class="item" effect="dark" content="密度" placement="top">
        <span style=" cursor: pointer;"><i class="el-icon-d-caret"></i></span>
      </el-tooltip>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="默认">默认</el-dropdown-item>
        <el-dropdown-item command="中等">中等</el-dropdown-item>
        <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <!-- <el-tooltip class="item" effect="dark" content="列设置" placement="top">
        <span><i class="el-icon-setting"></i></span>
      </el-tooltip> -->
    </div>
   </div>
   <div style="height: 92%;">
    <template>
        <el-table
        v-loading="loading"
          :data="tableshebei"
          style="width: 100%"
            border
            id="exportTabshebei"
            ref="tablerefs"
            :size="iissize"
            height="calc(100% - 1px)"
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          >
          <el-table-column
          fixed
            prop="devName"
            label="设备名称"
            sortable
            width="250">
          </el-table-column>
          <el-table-column width="120" v-for="(item, index) in dynamicKeys" :key="index" :label="value+ '-'+ (index+1)" :prop="item" align="right"></el-table-column>
      <el-table-column label="合计" align="right" :prop="array[0]">
      </el-table-column>
         
        </el-table>
      </template>

   </div>
  </div>
</template>

<script>
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import { exportyueduapi } from '@/api/ElectricalDistribution/monthreport'
export default {
  name: 'ReportFormsShebeiyd',
  props: {
    value: {
      type: String
    },
    tableshebei: {
      type: Array
    },
    bizOrgName: {
      type: String
    },
    form: {
      type: Object
    },
    switchroomIds:{
      type: String
    },
    shebeitotalCount: {
      type:Number
    }
  },
  data () {
    return {
      iissize: 'medium',
      loading: false,
      array:[]
    }
  },
  created () {
  },
  mounted () {

  },

  methods: {
    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    shuaxin () {
      this.$emit('newsubmit')
    },
    async daochu() {
      console.log(this.form);
      const res = await exportyueduapi({...this.form,orgName:this.bizOrgName,switchroomName:this.switchroomIds, isParams: true})
      console.log(res)
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '设备用电量报表.xls')
      // 解决原理先移除再append进去
      return
    },
    updatetable(){
      this.$nextTick(() => {
        this.$refs.tablerefs.doLayout()
      })
    }
  },
  computed: {
    dynamicKeys() {
      // 获取除devId和devName外的所有属性
      if(!this.tableshebei.length) return []
      const keys = Object.keys(this.tableshebei[0]).filter(key => key !== "devId" && key !== "devName");
      // 获取合计项的属性名
      keys.pop()
      this.array = this.tableshebei.map(ele => {
        return Object.keys(ele)[Object.keys(ele).length-1]
      })
      // const lastKey = keys[keys.length - 1];
      // 将合计项添加到属性列表中
      return keys
    }
  },
  watch: {
    deep: true,
    immediate: true
    // tableshebei (val) {
    //   if (!val[0]) {
    //     this.loading = true
    //     console.log(11)
    //   } else {
    //     this.loading = false
    //     console.log(22)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>

</style>
